<template>
  <div class="base" style="height: 100%">
    <el-container style="height: 100%">
      <el-header class="header-color" style="text-align: right">
        <div class="flex space-between items-center ul-header">
          <span class="a-header align-middle">NDSC后台管理页面</span>
          <div class="align-middle">
            <img class="headimg align-middle" :src="userImg">
            <span class="align-middle user-name">
              {{ userName }}
            </span>
<!--            <el-dropdown trigger="click" class="align-middle">-->
<!--              <span class="el-dropdown-link">-->
<!--                {{ userName }}-->
<!--                <el-icon class="el-icon&#45;&#45;right">-->
<!--                  <arrow-down />-->
<!--                </el-icon>-->
<!--              </span>-->
<!--              <template #dropdown>-->
<!--                <el-dropdown-menu>-->
<!--                  <el-dropdown-item>Action 1</el-dropdown-item>-->
<!--                  <el-dropdown-item>-->
<!--                    Action 2-->
<!--                  </el-dropdown-item>-->
<!--                  <el-dropdown-item>Action 3</el-dropdown-item>-->
<!--                  <el-dropdown-item>Action 4</el-dropdown-item>-->
<!--                  <el-dropdown-item>Action 5</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--              </template>-->
<!--            </el-dropdown>-->
            <el-popconfirm class="align-middle" @confirm="handlerExitClick" hide-icon title="确认要退出登录吗？" confirm-button-text="确认" cancel-button-text="取消">
              <template #reference>
                <el-button class="header-exit" size="mini" type="text">
                  退出登录
                </el-button>
              </template>
            </el-popconfirm>
          </div>
        </div>
      </el-header>
      <el-container class="contain-aside-main">
        <el-aside class="aside-color" style="height: 100%; color: white" width="200px">
          <el-menu
            active-text-color="#fff"
            background-color="#0f2950"
            text-color="#a3b1cc"
            class="menu-list"
          >
            <el-menu-item @click="toControlHome" index="2">
              <el-icon class="icon-color">
                <house/>
              </el-icon>
              <span class="span-color">首页</span>
            </el-menu-item>
            <el-menu-item @click="toControlUser" index="2">
              <el-icon class="icon-color">
                <user-filled/>
              </el-icon>
              <span class="span-color">用户管理</span>
            </el-menu-item>
            <el-menu-item index="3" @click="toControlRole">
              <el-icon class="icon-color">
                <avatar />
              </el-icon>
              <span class="span-color">角色管理</span>
            </el-menu-item>
            <el-menu-item @click="controlPermission" index="5">
              <el-icon class="icon-color">
                <stamp />
              </el-icon>
              <span>权限管理</span>
            </el-menu-item>
            <el-menu-item @click="toControlBlog" index="4">
              <el-icon class="icon-color">
                <document />
              </el-icon>
              <span>博客管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="mainBase">
          <keep-alive>
            <router-view />
          </keep-alive>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import './index.less'
import indexT from './indexT'

export default indexT
</script>
